<template>
	<view class="page-view flex flex-direction">
		<image src="../../static/bg-icon.png" mode="widthFix" class="bg"></image>
		<cu-custom ref="cuCustom" :isBack="true" bgImage="noImage">
			<template slot="backText">
				返回
			</template>
		</cu-custom>

		<scroll-view class="main flex-sub" :scroll-y="true">
			<view class="banner">
				<image src="../../static/bannertxt.png" mode="widthFix"></image>
				<!-- <view>2022管理类联考</view>
				<view class="txt">深度评估分析</view> -->
				<view class="tip">注意：仅供参考，不作为实际录取依据</view>
			</view>
			<view class="bg-white">
				<view class="card">
					<div class="card-hd">您的报考信息与成绩</div>
					<div class="_table _table_lg">
						<div class="_tr">
							<div class="_td">综合能力：</div>
							<div class="_td">{{ userInfo.gzScore || 0 }}分</div>
						</div>
						<div class="_tr">
							<div class="_td">英语二：</div>
							<div class="_td">{{ userInfo.enScore || 0 }}分</div>
						</div>
						<div class="_tr">
							<div class="_td">总分：</div>
							<div class="_td">{{ userInfo.totalScore || 0 }}分</div>
						</div>
						<div class="_tr">
							<div class="_td">报考院校：</div>
							<div class="_td">{{ schoolInfo.schoolName || '' }}</div>
						</div>
						<div class="_tr">
							<div class="_td">报考专业：</div>
							<div class="_td">{{ userInfo.major || '' }}</div>
						</div>
					</div>
				</view>
				<template v-if="schoolInfo.earlyNormalApproval != 'approval_early'">
					<view class="card margin-top-sm"><div class="card-hd">近四年正常批复试分数线</div></view>
					<view :style="{ width: cWidth + 'px', margin: '0 auto' }">
						<line-charts :opts="lineopts" chartType="line" :cWidth="cWidth" :cHeight="cHeight" ref="line"></line-charts>
					</view>
					<view class="card margin-top-sm">
						<div class="_table _table_md">
							<div class="_th flex">
								<div class="_td flex-sub" v-for="(item, index) in retrials">
									{{ item.year }}年
									<i :class="'icon' + (index + 1)"></i>
								</div>
							</div>
							<div class="_tr flex">
								<div class="_td flex-sub" v-for="(item, index) in retrials">{{ item.totalScores }}分</div>
							</div>
							<div class="_tr flex">
								<div class="_td flex-sub" v-for="(item, index) in retrials">{{ item.gzScores }}分</div>
							</div>
							<div class="_tr flex">
								<div class="_td flex-sub" v-for="(item, index) in retrials">{{ item.enScores }}分</div>
							</div>
						</div>
					</view>
				</template>
				<view class="card margin-top-sm" v-if="schoolInfo.earlyNormalApproval != 'approval_normal'">
					<div class="card-hd">近四年提前批分数线/国家线</div>
					<div class="_table _table_xl">
						<div class="_tr">
							<div class="_td _td_25">年份</div>
							<div class="_td _td_25">总分</div>
							<div class="_td _td_25">管综</div>
							<div class="_td _td_25">英语</div>
						</div>

						<div class="_tr" v-for="(item, index) in natinals">
							<div class="_td _td_25 _year">{{ item.year }}年</div>
							<div class="_td _td_25">{{ item.totalScores }}</div>
							<div class="_td _td_25">{{ item.gzScores }}</div>
							<div class="_td _td_25">{{ item.enScores }}</div>
						</div>
					</div>
				</view>
				<div class="title flex align-center justify-center">
					<image src="/static/start.png" mode="widthFix"></image>
					<text>深度院校上岸分析</text>
					<image src="/static/start.png" mode="widthFix"></image>
				</div>
				<div class="analysis">
					<div>{{ retrialStr }}</div>
					<div>{{ approvalStr }}</div>
				</div>
				<div class="proposal">
					<div class="proposal-item">
						<div class="proposal-item-hd">根据往年的复试情况果芽老师建议：</div>
						<div>{{ advise }}</div>
					</div>
					<div class="proposal-item">
						<div class="proposal-item-hd">{{ userInfo.status == 0 ? '调剂建议' : '复试建议' }}：</div>
						<div>{{ proposal }}</div>
					</div>
				</div>
				<div class="title flex align-center justify-center">
					<image src="/static/start.png" mode="widthFix"></image>
					<text>2023录取成绩分析</text>
					<image src="/static/start.png" mode="widthFix"></image>
				</div>
				<div class="report">
					<block v-if="schoolInfo.scoresAnalysis && schoolInfo.scoresAnalysis.length > 0">
						<div class="imglist">
							<image @tap="ViewImage(img, schoolInfo.scoresAnalysis)" :src="fileUrl + img" mode="widthFix" v-for="(img, index) in schoolInfo.scoresAnalysis" :key="index"></image>
						</div>
						<div class="tip">
							<text>注：</text>
							2023年录取成绩分析仅供参考，具体以当年实际录取情况为准，如数据有异议，可咨询果芽老师或者参考官网数据
						</div>
					</block>
					<div v-else class="nodata">暂无数据</div>
				</div>
				<view class="text-center"><button class="sharebtn" type="default" open-type="share">觉得有帮助，记得分享给身边的研友哦！</button></view>
				<!-- <view class="ad" v-if="img1"><image :src="fileUrl + img1" mode="widthFix"></image></view> -->
				<!-- <view class="audiobox" @tap="viewQr()" v-if="img2"><image :src="fileUrl + img2" mode="widthFix"></image></view> -->
			</view>
			<!-- <view class="goods" @tap="openShop"><image src="/static/goods.jpg" mode="widthFix"></image></view> -->
			<goods></goods>
		</scroll-view>
		<fixedcontact></fixedcontact>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import LineCharts from '@/js_sdk/u-charts/u-charts/component.vue';
import goods from '@/components/goods.vue';
import fixedcontact from '@/components/fixedcontact.vue';

export default {
	data() {
		return {
			current: 0,
			scores: {},
			result: {},
			userInfo: {},
			natinals: [],
			retrials: [],
			schoolInfo: {},
			fileUrl: 'https://apps.guoyamba.com/',
			proposal: '',
			img1: '',
			img2: '',
			lineopts: {
				color:['#448aca','#89a6ff','#ff3d71','#ffbd3d'],
				categories: [],
				series: []
			},
			cWidth: 300,
			cHeight: 250,
			retrialStr: '',
			advise: '',
			approvalStr: ''
		};
	},
	components: { LineCharts, goods,fixedcontact },

	computed: {
		...mapState(['openid', 'qrimg'])
	},
	created() {
		// if (this.openid) {
		// 	this.findDetailAnalysis(this.openid);
		// } else {
		// 	this.getCode();
		// }
		this.getCode();
	},
	methods: {
		...mapMutations(['login', 'setQrimg']),
		changeCollapse(e) {
			this.current = e.index;
		},
		findDetailAnalysis(openid) {
			this.$getajax(this.$api.findDetailAnalysis, {
				openid
			}).then(da => {
				this.userInfo = da.data.userInfo;
				this.natinals = da.data.natinals; //提前
				this.retrials = da.data.retrials; //复试
				this.retrialStr = da.data.retrialStr;
				this.advise = da.data.advise;
				this.approvalStr = da.data.approvalStr;
				if (da.data.schoolInfo.scoresAnalysis) {
					let list = da.data.schoolInfo.scoresAnalysis.split(';');
					da.data.schoolInfo.scoresAnalysis = [...list];
				}
				this.schoolInfo = da.data.schoolInfo;
				// this.getConfigList('advise', this.userInfo.status);
				// this.getConfigList('system', 4);
				// this.getConfigList('system', 2);
				let series = [
					// {
					// 	name: '2022',
					// 	color: '#448aca',
					// 	data: [],
					// 	legendShape: 'circle'
					// },
					// {
					// 	name: '2021',
					// 	color: '#89a6ff',
					// 	data: [],
					// 	legendShape: 'circle'
					// },
					// {
					// 	name: '2020',
					// 	color: '#ff3d71',
					// 	data: [],
					// 	legendShape: 'circle'
					// },
					// {
					// 	name: '2019',
					// 	color: '#ffbd3d',
					// 	data: [],
					// 	legendShape: 'circle'
					// }
				];
				let categories = ['总分', '英语', '综合'];
				this.retrials.forEach((item, index) => {
					// categories.push(item.year + '年');
					series.push({
						data:[item.totalScores, item.enScores, item.gzScores],
						name: item.year + '年',
						legendShape:'circle'
					})
					// series[index].data = ;
					// series[index].name = item.year + '年';
					// series[index].legendShape='circle'
					// // series[1].data.push(item.gzScores);
					// series[2].data.push(item.enScores);
					// series[3].data.push(200);
				});
				this.lineopts.categories = [...categories];
				this.lineopts.series = [...series];
				this.$nextTick(() => {
					console.log('this.$refs.line',this.$refs)
					this.$refs.line.changeData(this.lineopts);
				});
			});
		},
		getCode() {
			let $me = this;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					let code = loginRes.code;
					$me.getSession(code);
				}
			});
		},

		getSession(code) {
			this.$getajax(this.$api.getSession, { code }).then(da => {
				if (da.code == 200) {
					this.login(da.data);
					this.findDetailAnalysis(da.data.openid);
				}
			});
		},
		getConfigList(type, state) {
			let code = type == 'advise' ? (state == 1 ? 'adviser' : 'advisen') : 'wxpic' + state;
			this.$postajax(this.$api.getConfigList, { type, code }).then(da => {
				if (da.code == 200) {
					if (type == 'advise') {
						this.proposal = da.data[0].name;
					} else {
						if (state == 4) {
							this.img1 = da.data[0].name;
						} else {
							this.img2 = da.data[0].name;
						}
					}
				}
			});
		},
		ViewImage(img, list) {
			if (list && list.length > 0) {
				list = list.map(item => {
					return this.fileUrl + item;
				});
			}
			console.log('list', list);
			uni.previewImage({
				urls: list && list.length > 0 ? list : [this.fileUrl + img],
				current: this.fileUrl + img
			});
		},
		// viewQr() {
		// 	if (this.qrimg) {
		// 		uni.previewImage({
		// 			urls: [this.qrimg],
		// 			current: this.qrimg
		// 		});
		// 	} else {
		// 		/* 查询二维码图片 */
		// 		this.$postajax(this.$api.getConfigList, { type: 'system', code: 'wxpic3' }).then(da => {
		// 			if (da.code == 200 && da.data.length > 0) {
		// 				let qrimg = da.data[0].name;
		// 				this.setQrimg(this.fileUrl + qrimg);
		// 				uni.previewImage({
		// 					urls: [this.fileUrl + qrimg],
		// 					current: this.fileUrl + qrimg
		// 				});
		// 			}
		// 		});
		// 	}
		// },
		// openShop() {
		// 	wx.navigateToMiniProgram({
		// 		appId: 'wx6865da7c4284b31e',
		// 		path: 'plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=118639977'
		// 	});
		// }
	},
	onShareAppMessage(res) {
		var url = '/pages/index/index';
		return {
			title: '果芽MBA MEM MPA 联考估分',
			path: url,
			imageUrl: 'https://apps.guoyamba.com/share02.png'
		};
	}
};
</script>

<style lang="scss">
page,
.page-view {
	background: linear-gradient(#fdb376, #dc6a56);
	height: 100%;
	position: relative;
	.bg {
		position: absolute;
		top: 70rpx;
		width: 100%;
	}
	// & > view {
	// 	position: relative;
	// 	z-index: 999;
	// 	height: 100vh;
	// 	top: 0;
	// 	padding-bottom: 35rpx;
	// }
	.banner {
		text-align: center;
		font-size: 70rpx;
		padding: 30rpx 0;
		color: #4141ed;
		line-height: 1;
		image {
			display: block;
			width: 565rpx;
			height: 150upx;
			margin: 40rpx auto 25rpx;
		}
		.txt {
			margin: 40rpx 0 25rpx;
		}
		.tip {
			background: url(../../static/tipbg.png) no-repeat center center;
			background-size: 100% 100%;
			width: 565rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #d36c4e;
			font-size: 28rpx;
			font-style: initial;
			margin: 0 auto;
		}
	}
	.main {
		min-height: 0;
		// overflow: auto;
		// -webkit-overflow-scrolling: touch;
		padding: 0 16rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 20rpx);
		.bg-white {
			padding: 40rpx 0;
		}
		.card {
			border: 1px solid #5a5a5a;
			width: 612rpx;
			margin-left: auto;
			margin-right: auto;
			.card-hd {
				font-size: 34rpx;
				color: #fff;
				font-weight: bold;
				background: #f8a66e;
				text-align: center;
				line-height: 60rpx;
			}
			._table {
				._tr,
				._th {
					overflow: hidden;
					&:not(:last-child) {
						border-bottom: 1px solid #5a5a5a;
					}
				}
				._td {
					float: left;
					& + ._td {
						border-left: 1px solid #5a5a5a;
					}
				}
				&._table_lg {
					line-height: 55rpx;
					font-size: 28rpx;
					color: #1e1e1e;
					background: #f8f8f8;
					._td {
						width: 50%;
						&:first-child {
							padding-left: 60rpx;
							text-align: left;
						}
						&:last-child {
							text-align: center;
						}
					}
				}
				&._table_md {
					color: #2f2f2f;
					font-size: 22rpx;
					line-height: 32rpx;
					text-align: center;
					.icon1,
					.icon2,
					.icon3,
					.icon4 {
						display: inline-block;
						height: 18rpx;
						width: 18rpx;
						border-radius: 100%;
						margin-left: 10rpx;
					}
					.icon1 {
						background: #448aca;
					}
					.icon2 {
						background: #89a6ff;
					}
					.icon3 {
						background: #ff3d71;
					}
					.icon4 {
						background: #ffbd3d;
					}
					._td {
						width: 25%;
					}
				}
				&._table_xl {
					color: #6e6e6e;
					font-size: 27rpx;
					text-align: center;
					line-height: 55rpx;
					._td_14 {
						width: calc(100% / 7);
					}
					._td_86 {
						width: calc(100% / 7 * 6);
					}
					._td_16 {
						width: calc(100% / 6);
					}
					._td_50 {
						width: 50%;
					}
					._year {
						// font-size: 20rpx;
					}
					._td_25 {
						width: 25%;
					}
				}
			}
		}
		.title {
			color: #fff;
			font-size: 34rpx;
			height: 59rpx;
			background: #f8a66e;
			width: 600rpx;
			margin: 55rpx auto 0;
			image {
				display: block;
				width: 88rpx;
				height: 40rpx;
			}
			text {
				margin: 0 10rpx;
			}
		}
		.analysis {
			width: 600rpx;
			margin: 10rpx auto;
			color: #727272;
			font-size: 26rpx;
			line-height: 36rpx;
			& > view {
				padding-top: 20rpx;
			}
		}
		.proposal {
			background: url(../../static/seal.png) no-repeat center center;
			background-size: 346rpx 346rpx;
			width: 600rpx;
			margin: 25rpx auto 0;
			.proposal-item {
				font-size: 24rpx;
				color: #2a2a2a;
				line-height: 40rpx;
				padding-top: 30rpx;
				border-top: 1px solid #f49d6e;
				.proposal-item-hd {
					color: #dd6735;
					font-size: 28rpx;
					margin-bottom: 10rpx;
					font-weight: bold;
				}
				& + .proposal-item {
					margin-top: 30rpx;
				}
			}
		}
		.report {
			width: 560rpx;
			margin: 25rpx auto 0;
			.imglist {
				image {
					display: block;
					margin: 0 auto 20rpx;
				}
			}
			.tip {
				color: #2a2a2a;
				line-height: 44rpx;
				font-size: 24rpx;
				text {
					font-weight: bold;
				}
			}
			.nodata {
				height: 200rpx;
				text-align: center;
				line-height: 200rpx;
			}
		}
		button.sharebtn {
			margin: 30rpx auto 45rpx;
			display: inline-block;
			min-width: 543rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			padding: 0 20rpx;
			background: linear-gradient(to right, #ffd46f, #ef6c26);
			font-size: 31rpx;
			color: #fff;
			font-weight: bold;
		}
		.ad {
			display: block;
			width: 678rpx;
			margin: 0 auto;
			image {
				display: block;
				width: 100%;
			}
		}
		.audiobox {
			width: 626rpx;
			// border-radius: 10rpx;
			margin: 35rpx auto 0;
			// border: 1px solid #5a5a5a;
			// padding-top: 28rpx;
			// padding-bottom: 35rpx;
			// overflow: hidden;
			image {
				display: block;
				width: 100%;
			}
			.qrbox {
				background: #fee9dd;
				border-radius: 10rpx;
				padding: 10rpx 35rpx 20rpx 15rpx;
				margin: 0 18rpx 40rpx;
				color: #282828;
				font-size: 24rpx;
				image {
					display: block;
					width: 127rpx;
					& + view {
						text-align: center;
						font-weight: bold;
						color: #282828;
						font-size: 18rpx;
						text {
							color: #ef6c26;
							font-size: 31rpx;
						}
					}
				}
				.qrbox-hd {
					color: #ef6c26;
					font-weight: bold;
					font-size: 36rpx;
					margin-bottom: 16rpx;
				}
				.qrbox-btn {
					color: #fff;
					background: #ef6c26;
					border-radius: 10rpx;
					font-weight: bold;
					width: 218rpx;
					height: 39rpx;
					line-height: 39rpx;
					text-align: center;
					margin-top: 16rpx;
				}
			}
			.audiolist {
				padding: 20rpx 30rpx;
				i {
					width: 157rpx;
					display: block;
				}
			}
			.audio-item {
				width: 157rpx;
				height: 61rpx;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
				color: #282828;
				font-size: 20rpx;
				padding: 0 10rpx;
				margin-bottom: 10rpx;
				image {
					display: block;
					width: 42rpx;
					height: 42rpx;
					margin-right: 12rpx;
				}
			}
		}
	}
}
.goods {
	margin-top: 10upx;
	image {
		display: block;
		width: 100%;
		height: 232upx;
	}
}
</style>
